<style type="text/less">
    @import "/web/public/public.less";
    #hot_search.course{
        margin-top: 30px;
        .title{
            border-bottom: 1px solid #eeeeee;
            .bor{
                display: inline-block;
                color: #565d6d;
                font-size: 20px;
                font-weight: 900;
            }
            .title_txt{
                font-size: 20px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 2px;
                color: #333333;
                margin-bottom: 20px;
                padding-left: 10px;
                display:inline-block;
            }
            .more{
                float: right;
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #7f7f7f;
                margin-top: 4px;
            }
        }
        .center{
            margin-top: 20px;
            display: block;
            a{
                display: inline-block;
                text-align: center;
                color: #ffffff;
                &:hover{
                    transform:scale(1.03);
                }
            }
            .color1{
                background: #42a1e1;
            }
            .color2{
                background: #0473bb;
            }
            .color3{
                background: #6cbff5;
            }
            .left{
                width: 58px;
                display: inline-block;
                vertical-align: top;
                .fl;
                a{
                    width: 100%;
                }
                .left1{
                    height: 45px;
                    line-height: 45px;
                }
                .left2{
                    height: 84px;
                    margin-top: 1px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    span{

                    }
                }
            }
            .right{
                display: inline-block;
                width: 236px;
                vertical-align: top;
                margin-left: 1px;
                .fl;
                .right1{
                    width: 88px;
                    height: 88px;
                    float: left;
                    i{
                        font-size: 26px;
                        margin-top: 12px;
                        line-height: 40px;
                    }

                }
                .right2{
                    width: 146px;
                    height: 36px;
                    float: left;
                    margin-left: 1px;
                    line-height: 36px;
                }
                .right3{
                    width: 76px;
                    height: 51px;
                    float: left;
                    margin: 1px 0 0 1px;
                    line-height: 51px;
                }
                .right4{
                    width: 69px;
                    height: 51px;
                    margin: 1px 0 0 1px;
                    float: left;
                    i{
                        font-size: 20px;
                        margin-top: 8px;
                        margin-bottom: 2px;
                    }
                }
                .right5{
                    width: 150px;
                    height: 41px;
                    line-height: 41px;
                    margin: 1px 1px 0 1px;
                    float: left;
                }
                .right6{
                    width: 83px;
                    height: 41px;
                    line-height: 41px;
                    float: left;
                    margin-top: 1px;
                }
            }
        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<#if channel.channelStatus == 1>
    <div id="hot_search" class="course">
        <div class="title">
            <p class="bor">//</p>
            <p class="title_txt">${channel.channelName}</p>
        </div>
        <div class="center">
            <div class="left">
                <a href="${"${domain}/web/tagList/1.html?id=${channelList[0].keyword}&name=${channelList[0].text}"}" target="_blank" class="left1 color1">${channelList[0].text}</a>
                <a href="${"${domain}/web/tagList/1.html?id=${channelList[3].keyword}&name=${channelList[3].text}"}" target="_blank" class="left2 color3">
                    <span>${channelList[3].text}</span>
                </a>
            </div>
            <div class="right">
                <a href="${"${domain}/web/tagList/1.html?id=${channelList[1].keyword}&name=${channelList[1].text}"}" target="_blank" rel="noopener noreferrer" class="right1 color2">
                    <i class="iconfont icon-hezuogongying"></i>
                    <p>${channelList[1].text}</p>
                </a>
                <a href="${"${domain}/web/tagList/1.html?id=${channelList[2].keyword}&name=${channelList[2].text}"}" target="_blank" rel="noopener noreferrer" class="right2 color3">${channelList[2].text}</a>
                <a href="${"${domain}/web/tagList/1.html?id=${channelList[4].keyword}&name=${channelList[4].text}"}" target="_blank" rel="noopener noreferrer" class="right3 color1">${channelList[4].text}</a>
                <a href="${"${domain}/web/tagList/1.html?id=${channelList[5].keyword}&name=${channelList[6].text}"}" target="_blank" rel="noopener noreferrer" class="right4 color2">
                    <i class="iconfont icon-diqiu"></i>
                    <p>${channelList[5].text}</p>
                </a>
                <a href="${"${domain}/web/tagList/1.html?id=${channelList[6].keyword}&name=${channelList[6].text}"}" target="_blank" rel="noopener noreferrer" class="right5 color3">${channelList[6].text}</a>
                <a href="${"${domain}/web/tagList/1.html?id=${channelList[7].keyword}&name=${channelList[7].text}"}" target="_blank" rel="noopener noreferrer" class="right6 color1">${channelList[7].text}</a>
            </div>
        </div>
    </div>
</#if>